<template>
  <header
    class="header-body"
    :class="{
      'x-header x-bg-transparent': gradientHeader,
      'x-bg-normal': !gradientHeader,
    }"
  >
    <nav
      class="c-content h-full flex items-center justify-between px-6"
      aria-label="Global"
    >
      <!-- logo -->
      <div class="h-full">
        <a href="/" class="flex h-full items-center text-primary">
          <logo />
        </a>
      </div>
      <!-- 移动端打开导航栏按钮 -->
      <div class="flex sm:hidden">
        <Icon
          class="text-3xl"
          icon="mdi:menu-open"
          @click="mobileMenuOpen = true"
        />
      </div>
      <!-- 一级菜单 -->
      <div class="hidden sm:flex sm:gap-x-12 ml-[100px] h-full items-center">
        <div id="docsearchDom" />
        <div
          v-for="item in navigation"
          :key="item.text"
          class="first-nav h-full flex items-center"
        >
          <a :href="item.href"
            >{{ item.text }}
            <div
              v-if="item.children?.length"
              class="second-nav w-full flex justify-center"
            >
              <div class="c-content flex py-4 gap-x-4 justify-center">
                <!-- 二级菜单 -->
                <a
                  v-for="child in item.children"
                  :key="child.text"
                  :href="child.firstHref"
                >
                  <div
                    class="flex items-center text-[#30435E] hover:text-primary"
                  >
                    <Icon v-if="child.icon" :icon="child.icon" />
                    <span class="text-base ml-2">{{ child.text }}</span>
                  </div>
                </a>
              </div>
            </div>
          </a>
        </div>
      </div>
      <!-- 外部链接 -->
      <div class="hidden sm:flex sm:gap-x-4">
        <a
          v-for="item in externalLinks"
          :key="item.text"
          :href="item.href"
          :title="item.text"
          target="_blank"
          class="block flex items-center justify-between"
        >
          <img class="block h-6 w-6" :src="imgIcon[item.icon!]" />
        </a>
      </div>
    </nav>
    <!-- 移动端导航栏弹窗 -->
    <Dialog
      class="lg:hidden"
      :open="mobileMenuOpen"
      @close="mobileMenuOpen = false"
    >
      <DialogPanel
        class="fixed inset-y-0 right-0 z-30 w-full overflow-y-auto bg-text-anti"
      >
        <div
          class="flex h-20 items-center justify-between bg-black px-6 text-white"
        >
          <!-- logo -->
          <a class="text-2xl" href="/"> wudandong.top </a>
          <Icon
            class="text-3xl"
            icon="mdi:close"
            @click="mobileMenuOpen = false"
          />
        </div>
        <div class="divide-y divide-black/10">
          <div v-for="(item, index) in navigation" :key="index">
            <a
              :href="item.href"
              class="block px-6 py-6 text-[1.3rem] text-[#131D29] flex items-center justify-between"
            >
              <span :class="{ 'm-first-nav-open': item.open }">{{
                item.text
              }}</span>
              <span
                v-if="item.children?.length"
                class="cursor-pointer text-2xl pl-12"
                @click.stop.prevent="item.open = !item.open"
              >
                <Icon
                  style="transition: all 0.3s ease-in-out"
                  :class="{ 'rotate-180': item.open }"
                  icon="mdi:chevron-down"
                />
              </span>
            </a>
            <div
              v-if="item.children?.length"
              class="space-y-2 bg-[#F3F6FA] m-second-nav-container"
              :class="{ 'm-second-nav-container-open': item.open }"
            >
              <a
                v-for="child in item.children"
                :key="child.text"
                :href="child.firstHref"
                class="block px-6 py-4 text-xl text-[#30435E]"
              >
                <div class="flex items-center">
                  <Icon v-if="child.icon" :icon="child.icon" />
                  <span class="ml-2">{{ child.text }}</span>
                </div>
              </a>
            </div>
          </div>
        </div>
        <!-- 外部链接 -->
        <div class="mt-10 flex">
          <a
            v-for="item in externalLinks"
            :key="item.text"
            :href="item.href"
            target="_blank"
            class="block border p-2 flex items-center justify-between ml-4 rounded-[4px]"
          >
            <img class="block h-8 w-8" :src="imgIcon[item.icon!]" />
          </a>
        </div>
      </DialogPanel>
    </Dialog>
  </header>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Dialog, DialogPanel } from "@headlessui/vue";
import { Icon } from "@iconify/vue";
import logo from "./logo.vue";
import { externalLinks, navigation as originNav } from "@/constants/nav";
import csdn from "@/assets/images/csdn.png";
import gitee from "@/assets/images/gitee.png";

defineProps<{
  gradientHeader: boolean;
}>();

const mobileMenuOpen = ref(false); // 移动端的菜单是否打开状态
const navigation = ref(originNav);

const imgIcon: any = {
  csdn: csdn.src,
  gitee: gitee.src,
};

onMounted(() => {
  window.docsearch({
    container: "#docsearchDom",
    placeholder: "搜索文档",
    appId: "R7KMF26OO7",
    apiKey: "4226b476dfa576183bd2cf685b5208bf",
    indexName: "wudandong",
  });
});
</script>

<style lang="scss">
.header-body {
  border-bottom: 1px solid #eaeaea00;
  @apply w-full fixed flex items-center h-20 justify-center text-lg z-[2];
}

@keyframes header-background {
  0% {
    border-color: #eaeaea00;
    @apply bg-bg-1/10 text-white;
  }
  20% {
    border-color: #eaeaeaff;
    @apply bg-white text-black;
  }
  100% {
    border-color: #eaeaeaff;
    @apply bg-white text-black;
  }
}

.x-header {
  @apply top-0 left-0 will-change-scroll;
  animation: header-background linear;
  animation-duration: auto;
  animation-timeline: scroll(nearest);
}

.x-bg-transparent {
  @apply bg-bg-1/10;
}

.x-bg-normal {
  border-color: #eaeaeaff;
  @apply bg-white;
}

.first-nav {
  &:hover {
    .second-nav {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }
  .second-nav {
    display: flex;
    position: absolute;
    top: 4rem;
    left: 0;
    background-color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: all 0.3s ease-in;
  }
}

.m-first-nav-open {
  @apply text-primary;
}

.m-second-nav-container {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.m-second-nav-container-open {
  max-height: 500px;
}
</style>
